<template>
	<uni-popup :show="show" type="bottom" @hidePopup="hidePopup">
		<view class="list_box">
			<view class="list_title">
				<view class="list_title_content">
					<text class="isbold">商品清单</text>
					<text class="list_title_count">（共{{goodsCount}}件）</text>
				</view>
				<image class="close_icon" src="" @tap="hidePopup"></image>
			</view>
			<view class="list_content">
				<scroll-view class="list_wrapper" scroll-y="true">
					<confirmOrderProductItem class="list_item" v-for="(item, index) in list" :key="index" :j='index' :pageType='pageType'
						:item="item" :introType="3" :brandId="$store.state.replace.brandsId" :modifiableCount="false" showDeliveryDate :deliveryWay="deliveryWay">
					</confirmOrderProductItem>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import confirmOrderProductItem from './confirmOrderProductItem.vue'
	export default {
		components: {
			confirmOrderProductItem
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return []
				}
			},
			pageType: {
				type: [String, Number],
				default: '2'
			},
			// 发货方式：0-正常发货,1-暂不发货
			deliveryWay: {
				type: [String, Number],
				default: 0
			}
		},
		computed: {
			// 商品总数
			goodsCount() {
				return this.list.reduce((accu, item) => {
					return accu += Number(item.amount || 0)
				}, 0)
			}
		},
		methods: {
			hidePopup() {
				this.$emit('update:show', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_box {
		width: 100%;
		min-height: 750rpx;
		max-height: 80vh;
		padding: 56rpx 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
		border-radius: 12rpx 12rpx 0px 0px;
		background: #FFFFFF !important;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		line-height: 1;

		.list_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 56rpx;

			.list_title_content {
				color: #1b2120;
				font-size: 32rpx;

				.list_title_count {
					color: #7c807f;
					font-size: 28rpx;
				}
			}

			.close_icon {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.list_content {
			min-height: 600rpx;
			max-height: 65vh;
			
			.list_wrapper {
				min-height: 600rpx;
				max-height: 65vh;
			}

			.list_item {
				margin-bottom: 48rpx;
				text-align: left;
				line-height: 1.4;
			}

			.list_item:last-child {
				margin-bottom: 0;
			}

			::v-deep .product {
				height: 200rpx;

				.product-pic {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
				

				.product-msg {
					flex: 1;
					margin-left: 32rpx;
					text-align: left;
				}

				.product-intro {
					margin-top: 16rpx !important;
				}
			}
			
			::v-deep .product-type {
				.width-left {
					width: 200rpx;
					margin-right: 24rpx;
					text-align: left;
				}
			}
		}

	}
</style>
